<template>
  <div class="login">
    <div class="login-box">
      <el-form ref="loginRef" :model="loginForm" class="login-form">
        <h3 class="title">校园兼职后台管理</h3>
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            type="text"
            size="large"
            auto-complete="off"
            placeholder="账号"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            size="large"
            auto-complete="off"
            placeholder="密码"
            @keyup.enter="handleLogin"
          >
          </el-input>
        </el-form-item>
        <!--      <el-checkbox style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>-->
        <el-form-item style="width:100%;">
          <el-button
            size="large"
            type="primary"
            style="width:300px;margin: auto"
            @click.prevent="handleLogin"
          >
            <span>登 录</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { h, ref} from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { Store } from 'vuex'

import router from '@/router'
import Cookie from 'js-cookie'





const loginRef = ref(null)
const loginForm = ref({
  username: '',
  password: ''
})


async function getrole (username) {
  // const username = loginForm.value.username
  await axios.get('/api/username?username=' + username).then(res => {
    console.log(res.data[0].role)
    const img = res.data[0].img
    if (res.data[0].role == 'admin') {
      Cookie.set('userrole', res.data[0].role, { expires: 1 })
      // Store.commit('setadminimg',img)
    } else {
      ElMessage({
        message: h('p', null, [
          h('span', null, '权限不足'),
          h('i', { style: 'color: teal' }, 'VNode')
        ])
      })
    }
  })
}

async function getuser (username, password) {
  // const username = loginForm.value.username
  // const password = loginForm.value.password
  axios.post('/api/login?username=' + username + '&password=' + password, {
  }).then((res) => {
    if (res.data.code === 2000) {
      Cookie.set('username', res.data.username, { expires: 1 })
      router.push('/index')
      console.log(res.data.username)
    } else {
      ElMessage({
        message: h('p', null, [
          h('span', null, '账号或密码错误'),
          h('i', { style: 'color: teal' }, 'VNode')
        ])
      })
    }
  })
}


async function handleLogin () {
  const username = loginForm.value.username
  const password = loginForm.value.password

  await getuser(username, password)
  await getrole(username)
}
</script>

<style lang="scss" scoped>

.login {
  height: calc(100vh - 100px);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;

  .login-box {
    margin: auto;
  }
}

.title {
  margin: 0 auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;

  .el-input {
    height: 40px;

    input {
      display: inline-block;
      height: 40px;
    }
  }

}

</style>
